<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        :root {
            --base-color: #3f3352;
            --overlayH: 263;
            --overlayS: 23%;
            --overlayL: 26%;
        }

        * {
            box-sizing: border-box;
        }

        body {
            color: var(--base-color);
            padding: 1rem;
            margin: 0;
            min-height: 110vh;
            line-height: 1.6;
            font-family: muli, sans-serif;
            font-weight: 300;
            font-style: italic;
            font-size: 1.125rem;
        }

        h2,
        p {
            margin-top: 0;
        }

        h1,
        h2 {
            font-family: eloquent-jf-pro, serif;
            font-weight: 400;
            line-height: 1.125;
        }

        h2 {
            font-size: 1.25rem;
        }

        button {
            font-family: inherit;
            background: hsl(var(--overlayH), var(--overlayS), var(--overlayL));
            color: white;
            border: none;
            padding: 0.5rem 0.75rem;
            text-transform: uppercase;
            cursor: pointer;
        }

        .button-inline {
            padding: 0;
            display: inline;
            background: transparent;
            color: inherit;
            text-decoration: underline;
        }

        main {
            visibility: hidden;
        }

        main {
            max-width: 1400px;
            margin: 1.5rem auto;
            display: grid;
            gap: 1rem;
        }

        @media (min-width: 800px) {
            main {
                grid-template-columns: 1fr 3fr;
                gap: 2rem;
            }
        }

        img,
        a {
            display: block;
            height: 100%;
        }

        article a {
            position: absolute;
            left: 0;
            right: 0;
        }

        img {
            max-width: 100%;
            width: 100%;
            object-fit: cover;
        }

        .grid {
            display: grid;
            grid-gap: 1.5rem;
            list-style: none;
            margin: 0;
            padding: 0;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: minmax(16rem, max-content);
            position: relative;
        }

        @media (min-width: 1024px) {
            .grid {
                grid-template-columns: 1fr 1fr 1fr;
            }
        }

        .grid article {
            --max: 0;
            position: relative;
            overflow: hidden;
        }

        article:not(.details) button,
        article:first-child button {
            display: none;
        }

        article:first-child p:last-of-type {
            margin: 0;
        }

        .description {
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: clamp(1rem, 2.5vmin, 2.25rem);
        }

        article.details {
            grid-row: span 2;
            grid-column: span 2;
        }

        .description {
            background: linear-gradient(
                    0deg,
                    hsl(var(--overlayH), var(--overlayS), var(--overlayL), calc(1 * var(--max))) 0%,
                    hsla(
                            var(--overlayH),
                            var(--overlayS),
                            var(--overlayL),
                            calc(0.738 * var(--max))
                    ) 19%,
                    hsla(
                            var(--overlayH),
                            var(--overlayS),
                            var(--overlayL),
                            calc(0.541 * var(--max))
                    ) 34%,
                    hsla(
                            var(--overlayH),
                            var(--overlayS),
                            var(--overlayL),
                            calc(0.382 * var(--max))
                    ) 47%,
                    hsla(
                            var(--overlayH),
                            var(--overlayS),
                            var(--overlayL),
                            calc(0.278 * var(--max))
                    ) 56.5%,
                    hsla(
                            var(--overlayH),
                            var(--overlayS),
                            var(--overlayL),
                            calc(0.194 * var(--max))
                    ) 65%,
                    hsla(
                            var(--overlayH),
                            var(--overlayS),
                            var(--overlayL),
                            calc(0.126 * var(--max))
                    ) 73%,
                    hsla(
                            var(--overlayH),
                            var(--overlayS),
                            var(--overlayL),
                            calc(0.075 * var(--max))
                    ) 80.2%,
                    hsla(
                            var(--overlayH),
                            var(--overlayS),
                            var(--overlayL),
                            calc(0.042 * var(--max))
                    ) 86.1%,
                    hsla(
                            var(--overlayH),
                            var(--overlayS),
                            var(--overlayL),
                            calc(0.021 * var(--max))
                    ) 91%,
                    hsla(
                            var(--overlayH),
                            var(--overlayS),
                            var(--overlayL),
                            calc(0.008 * var(--max))
                    ) 95.2%,
                    hsla(
                            var(--overlayH),
                            var(--overlayS),
                            var(--overlayL),
                            calc(0.002 * var(--max))
                    ) 98.2%,
                    hsla(var(--overlayH), var(--overlayS), var(--overlayL), 0) 100%
            );
        }

        .details-view {
            color: white;
            opacity: 0;
            transform: translateY(100%);
        }

        .article-6 {
            --overlayH: 47;
            --overlayS: 92%;
            --overlayL: 32%;
        }

        .article-2 {
            --overlayH: 353;
            --overlayS: 34%;
            --overlayL: 58%;
        }

        .article-5 {
            --overlayH: 136;
            --overlayS: 62%;
            --overlayL: 25%;
            --overlayH: 176;
            --overlayS: 49%;
            --overlayL: 16%;
        }

    </style>
</head>
<body>
<main>
    <header>
        <h1>让我们试试 GreenSock 的 Flip</h1>
        <p>在此 CodePen 中，我使用 Flip 对 <code>grid</code> 属性中的更改进行动画处理。 我还尝试更改
            initial DOM 结构，通过将元素移动到列表顶部。排序呢？让我们显示 items 中的
            <button type="button" id="alpha-order" class="button-inline">alphabetical order.</button>
        </p>
    </header>
    <div class="grid">
        <article class="article article-1">
            <a href="#">
                <img src="https://images.unsplash.com/photo-1429087969512-1e85aab2683d?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDc5NDgwMA&ixlib=rb-1.2.1&q=85&w=600" alt="">
            </a>
            <section class="description">
                <h2>最亲爱的日记</h2>
                <div class="details-view">
                    <p>生姜是一种开花植物，其根茎、姜根或生姜，被广泛用作香料和 民间医学.</p>
                    <button type="button">移至页首</button>
                </div>
            </section>
        </article>
        <article class="article article-2">
            <a href="#">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/fbanijhrol4-annie-spratt-776x951.jpg" alt="">
            </a>
            <section class="description">
                <h2>窗台?</h2>
                <div class="details-view">
                    <p>生姜是一种开花植物，其根茎、姜根或生姜，被广泛用作香料和 民间医学.</p>
                    <button type="button">移至页首</button>
                </div>
            </section>
        </article>
        <article class="article article-3">
            <a href="#">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/2rm8p0rkxiw-marius-masalar-776x582.jpg" alt="">
            </a>

            <section class="description">
                <h2>Listen To Me</h2>
                <div class="details-view">
                    <p>Ginger is a flowering plant whose rhizome, ginger root or ginger, is widely used as a spice and a
                        folk medicine.</p>
                    <button type="button">Move to top</button>
                </div>
            </section>
        </article>
        <article class="article article-4">
            <a href="#">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/71nlan-2ya-andrew-neel-2-776x620.jpg" alt="">
            </a>
            <section class="description">
                <h2>Travel Often</h2>
                <div class="details-view">
                    <p>生姜是一种开花植物，其根茎、姜根或生姜，被广泛用作香料和 民间医学.</p>
                    <button type="button">移至页首</button>
                </div>
            </section>
        </article>
        <article class="details article article-5" style="--max:1">
            <a href="#">
                <img src="https://images.unsplash.com/photo-1483794344563-d27a8d18014e?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDg2NDUzOA&ixlib=rb-1.2.1&q=85&w=600" alt="">
            </a>
            <section class="description">
                <h2>Another Plant?</h2>
                <div class="details-view">
                    <p>生姜是一种开花植物，其根茎、姜根或生姜，被广泛用作香料和 民间医学.</p>
                    <button type="button">移至页首</button>
                </div>
            </section>
        </article>
        <article class="article article-6">
            <a href="#">
                <img src="https://images.unsplash.com/photo-1557180295-76eee20ae8aa?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDc5NDc2Mw&ixlib=rb-1.2.1&q=85&w=600" alt="">
            </a>
            <section class="description">
                <h2>On the Wave</h2>
                <div class="details-view">
                    <p>生姜是一种开花植物，其根茎、姜根或生姜，被广泛用作香料和 民间医学.</p>
                    <button type="button">移至页首</button>
                </div>
            </section>
        </article>
        <article class="article article-7">
            <a href="#">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/typewriter-1-776x968.jpg" alt="">
            </a>
            <section class="description">
                <h2>Great Gatsby</h2>
                <div class="details-view">
                    <p>生姜是一种开花植物，其根茎、姜根或生姜，被广泛用作香料和 民间医学.</p>
                    <button type="button">移至页首</button>
                </div>
            </section>
        </article>
        <article class="article article-8">
            <a href="#">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/xohlruw4k8-christelle-bourgeois-776x758.jpg" alt="">
            </a>
            <section class="description">
                <h2>In the Sun</h2>
                <div class="details-view">
                    <p>生姜是一种开花植物，其根茎、姜根或生姜，被广泛用作香料和 民间医学.</p>
                    <button type="button">移至页首</button>
                </div>
            </section>
        </article>
    </div>
</main>

<!-- 引入 GSAP 和 Flip 插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/Flip.min.js"></script>
<script>
    /*
本周，我们将研究 FLIP 技术。 单击可能需要一段时间 - 但当它发生时 - 您将能够轻松处理任何复杂的 UI 动画。
这是一个简单的 FLIP 动画，可以让你开始！
*/

    // 首先注册插件
    gsap.registerPlugin(Flip);

    // 抓住我们的元素
    const articles = document.querySelectorAll("article");
    const buttons = document.querySelectorAll(".grid button");
    const alphaButton = document.querySelector("#alpha-order");
    const container = document.querySelector(".grid");

    for (let article of [...articles]) {
        article.addEventListener("click", (e) => {
            e.preventDefault();
            if (article.classList.contains("details")) {
                return;
            }
            const state = Flip.getState(".grid article");

            const currentDetails = document.querySelector(".details");
            currentDetails && currentDetails.classList.remove("details");

            article.classList.add("details");
            // “FLIP” 从该保存的状态进行动画处理。
            const tl = Flip.from(state, {
                duration: 1,
                ease: "power1.inOut",
                stagger: 0.05,
                absolute: true,
                toggleClass: "changing",
                onStart: () => {
                    gsap.to(".details-view", {
                        opacity: 0,
                        y: "100%",
                        duration: 0.5
                    });
                    gsap.to(".grid article", {
                        "--max": 0,
                        duration: 0.8
                    });
                    gsap.to(".grid article.details", {
                        "--max": 1,
                        duration: 1,
                        delay: 0.2
                    });
                }
            });

            tl.to(
                ".details .details-view",
                {opacity: 1, y: 0, duration: 0.75},
                "-=.25"
            );
        });
    }

    for (let button of [...buttons]) {
        button.addEventListener("click", () => {
            const a = button.parentNode.parentNode.parentNode;
            const state = Flip.getState(".grid article, .description .details-view");
            container.prepend(a);
            const tl = Flip.from(state, {
                duration: 1,
                ease: "power1.inOut",
                stagger: 0.05,
                absolute: true
            });
        });
    }

    alphaButton.addEventListener("click", () => {
        const state = Flip.getState(".grid article, .description .details-view");
        [...articles]
            .sort((r, l) => {
                const titleR = r.querySelector("h2");
                const titleL = l.querySelector("h2");
                if (titleR.textContent > titleL.textContent) return 1;
                if (titleL.textContent > titleR.textContent) return -1;
                return 0;
            })
            .forEach((article) => container.append(article));
        const tl = Flip.from(state, {
            duration: 1,
            ease: "power1.inOut",
            stagger: 0.05,
            absolute: true
        });
    });

    // 介绍动画
    window.addEventListener("load", () => {
        gsap.to("main", {autoAlpha: 1, duration: 0.4});
        gsap.from(".grid article", {
            autoAlpha: 0,
            yPercent: 30,
            stagger: 0.04
        });
    });
</script>
</body>
</html>